<template>
    <div class="menu-container">
        <MenuTree @targetComponentCode="HandleClickMenuNode"></MenuTree>
    </div>
    <div class="operate-area" v-if="currentComponent !== null">
        <component :is="currentComponent"></component>
    </div>
    <div id="cesium-container"></div>
    <div class="mouse-status-info">
        <MouseStatusInfo></MouseStatusInfo>
        
    </div>
</template>

<script lang="ts" setup>
import MenuTree from '@/components/Menu/MenuTree.vue';
import { MenuEnum } from '@/system/Common/enums';
import menuComponentMap from '@/system/Config/MenuComponentMapConfig';
import CesiumViewer from '@/Viewer/CesiumViewer';

import type { Component } from 'vue';

let currentComponent = ref<Component | null>(null);

onMounted(() => {
    CesiumViewer.CreateViewer("cesium-container")
});

const HandleClickMenuNode = (componentCode: number) => {
    currentComponent.value = menuComponentMap[componentCode as MenuEnum];
}

</script>

<style scoped>
#cesium-container {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    /* z-index: 10; */
}

.menu-container {
    width: 240px;
    z-index: 11;
    position: absolute;
    left: 50px;
    top: 50px;
    text-align: left;

}

.operate-area {
    width: 360px;
    z-index: 11;
    position: absolute;
    right: 50px;
    top: 50px;
   
    background: #333541ab;
    color: white;
    border-radius: 10px;

}

.mouse-status-info{
    position: fixed; 
    left: 0px;
    right: 20px;
    bottom: 0px;
    height:30px;
    margin-right:20px;
    background: #333541ab;
    z-index: 11;
    width: calc(100% - 30px);
    line-height: 30px;
    color: white;

}
</style>